<template>
  <div style="margin-top: 20px">
    <div class="header-style">
      <div class="header-item">序号</div>
      <div class="header-item">歌曲</div>
      <div class="header-item">歌手</div>
      <div class="header-item">收藏</div>
    </div>
    <div
      class="header-style"
      v-for="(item, index) in songList"
      :key="item.id"
      @click="playmusic(item)"
      v-show="type=='all'?true:type==='heart'&&item.heart==1?true:false"
    >
      <div class="header-item">{{ index + 1 }}</div>
      <div class="header-item">{{ item.song.name }}</div>
      <div class="header-item">{{ item.song.artists[0].name }}</div>
      <div class="header-item" v-show="item.heart==0" @click.stop="heart(1,item)">
        <span class="fa fa-heart-o"></span>
      </div>
      <div class="header-item" v-show="item.heart==1" @click.stop="heart(2,item)"><span class="fa fa-heart"></span></div>
    </div>
  </div>
</template>

<script>
import { getUserSong } from "../api/api";
import  localJson from "./local.json"
export default {
  props:{
    type:{
      type:String,
      default:"all"
    }
  },  
  data() {
    return {
      songList: [],
    };
  },
  methods: {
    getSongList() {
      getUserSong(({data,status}) => {
        if(status==1){
            this.songList = data.result;
        }
        if(status==0){
          console.log(localJson)
            this.songList = localJson
        }
        this.computeList()
      });
    },
    playmusic(item) {
      this.$router.push({path:`/play/${item.id}`})
    },
    computeList(){
        let list = this.getStorage("heartList")||[]
        this.songList =  this.songList.map(item=>{
            let result =  list.find(initem=>initem.id===item.id)
            if(result){
                return {...item,heart:1}
            }else{
                return {...item,heart:0}
            }
        })
      this.setStorage("localSong",this.songList)

    },
    heart(key,item) {
        let list = this.getStorage("heartList")||[]
      if (key === 1) {
         list.push(item)
         this.setStorage("heartList",list)
         this.computeList()
      }
      if (key === 2) {
          list.forEach((initem,index)=>{
              if(initem.id==item.id){
                  list.splice(index,1)
              }
          })
          this.setStorage("heartList",list)
          this.computeList()
      }
    },
  },
  mounted() {
    this.getSongList();
    console.log(this.getStorage("key"));
  },
};
</script>

<style scoped>
.header-style {
  display: flex;
}
.header-item {
  width: 23%;
  text-align: center;
  font-size: 12px;
  height: 30px;
  /* line-height: 20px; */
}
</style>